<template>
    <el-form ref="userFormRef" :model="userForm" :rules="rules" label-width="100px">
        <el-form-item label="字典名称" prop="label">
            <el-input v-model="userForm.label" placeholder="输入字典名称"></el-input>
        </el-form-item>
        <el-form-item label="字典值" prop="value">
            <el-input v-model="userForm.value" placeholder="输入字典值"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input v-model="userForm.remark" placeholder="输入备注"></el-input>
        </el-form-item>
    </el-form>
</template>
<script setup>
const props = defineProps({
    dataList: {
        type: Array,
        default: () => []
    },
})
const userForm = ref({
    label: null,
    value: null,
    remark: null,
});

const rules = ref({
    label: [
        { required: true, message: '请输入字典名称', trigger: 'blur' },
    ],
    value: [
        { required: true, message: '请输入字典值', trigger: 'blur' },
    ],
})

const reset = (type, data) => {
    for (const i in userForm.value) {
        userForm.value[i] = null;
    }
    if (data) {
        userForm.value = JSON.parse(JSON.stringify(data));
    }
}
const userFormRef = ref(null);
const validate = () => {
    return new Promise(async(resolve, reject) => {
        await userFormRef.value.validate((valid, fields) => {
            resolve(valid)
        })
    })
}
const getFormData = () => {
    return JSON.parse(JSON.stringify(userForm.value))
}
const resetForm = () => {
    userFormRef.value.resetFields()
}
defineExpose({
    getFormData,
    reset,
    validate,
    resetForm
})
</script>
<style lang="scss" scoped>
.user-dept {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    :deep(.el-radio) {
        margin-right: 0;
        width: 33.3%;
    }
}
</style>